<template>
  <div v-loading.fullscreen="loading">
    <el-row :gutter="10">
      <el-col
        :span="24"
        style="text-align:left"
      >
        <el-button
          type="success"
          @click="addBtnClick"
        >添加</el-button>
        <el-button
          type="primary"
          @click="getTableDatas"
        >刷新</el-button>
      </el-col>
      <el-col
        :span="24"
        style="text-align:left"
      >
        <el-button
          type="danger"
          @click="logoutBtnClick"
        >退出账号</el-button>
        <span>当前账号:{{tableDatas.filters.currentID}}</span>
      </el-col>
    </el-row>

    <el-dialog
      v-model="dialogDatas.dialogFormVisible"
      :title="dialogDatas.isNew ? '添加':'修改'"
      top="5vh"
      width="90vw"
      destroy-on-close
    >
      <el-scrollbar max-height="70vh">
        <el-form :model="dialogDatas.currentData">
          <el-form-item
            v-for="item in dialogDatas.formItems"
            :label="item.label"
          >
            <div v-if="item.value == 'PASSDATE'">
              <div v-if="tableDatas.filters.isWB">
                一年
              </div>
              <div v-else-if="tableDatas.filters.isJTNB">
                半年
              </div>
              <div v-else>

                <el-row>
                  <el-button
                    type="primary"
                    :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
                    @click="dialogDatas.setPASSDATE($event)"
                  >上午</el-button>
                  <el-button
                    type="primary"
                    :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
                    @click="dialogDatas.setPASSDATE($event)"
                  >下午</el-button>
                  <el-button
                    type="primary"
                    :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
                    @click="dialogDatas.setPASSDATE($event)"
                  >今天</el-button>
                </el-row>

                <el-row class="marginTop10">
                  <el-button
                    type="info"
                    :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
                    @click="dialogDatas.setPASSDATE($event)"
                  >明天</el-button>
                  <el-button
                    type="info"
                    :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
                    @click="dialogDatas.setPASSDATE($event)"
                  >三天</el-button>
                  <el-button
                    type="info"
                    :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
                    @click="dialogDatas.setPASSDATE($event)"
                  >一周</el-button>
                </el-row>

                <el-row class="marginTop10">
                  <el-button
                    type="success"
                    :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
                    @click="dialogDatas.setPASSDATE($event)"
                  >一个月</el-button>
                  <el-button
                    type="success"
                    :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
                    @click="dialogDatas.setPASSDATE($event)"
                  >三个月</el-button>
                  <!-- <el-button
                  type="success"
                  @click="dialogDatas.setPASSDATE($event)"
                >六个月</el-button> -->
                </el-row>

              </div>

            </div>

            <el-date-picker
              v-else-if="item.isDate"
              unlink-panels
              v-model="dialogDatas.currentData[item.value]"
              :type="item.dateOption ? item.dateOption.type : 'date'"
              :shortcuts="item.dateOption ? item.dateOption.shortcuts : []"
              :format="item.dateOption ? item.dateOption.format : 'YYYY/MM/DD'"
              :value-format="item.dateOption ? item.dateOption.valueFormat : 'YYYY/MM/DD'"
              :date-format="item.dateOption ? item.dateOption.dateFormat : ''"
              :time-format="item.dateOption ? item.dateOption.timeFormat : ''"
              :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
              @change="item.dateChanged"
            />

            <el-select
              v-else-if="item.isSelect && dialogDatas.isNew"
              v-model="dialogDatas.currentData['checkSelect']"
              @change="item.selectChanged"
              filterable
              clearable
              :disabled="tableDatas.filters.isWB || tableDatas.filters.isJTNB"
            >
              <el-option
                v-for="opitem in dialogDatas.formOptions[item.selectOptionsName]"
                :key="opitem.value"
                :label="opitem.label"
                :value="opitem.value"
              />
            </el-select>

            <el-select
              v-else-if="item.isOption"
              v-model="dialogDatas.currentData[item.value]"
              filterable
              clearable
            >
              <el-option
                v-for="opitem in item.options"
                :key="opitem.value"
                :label="opitem.label"
                :value="opitem.value"
              />
            </el-select>

            <el-switch
              v-else-if="item.isSwitch"
              v-model="dialogDatas.currentData[item.value]"
              :disabled="item.disabled"
              inline-prompt
              :active-text="item.trueText"
              :inactive-text="item.falseText"
              :active-value="item.trueValue"
              :inactive-value="item.falseValue"
              :style="{'--el-switch-on-color': item.trueColor , '--el-switch-off-color':item.falseColor }"
              size="large"
            />

            <car-input-box
              v-else-if="item.isCar"
              :caridChanged="dialogDatas.caridChanged"
              :carid="dialogDatas.currentData.CARID"
            >
            </car-input-box>

            <el-input
              v-else
              v-model="dialogDatas.currentData[item.value]"
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>

      <template #footer>
        <span>
          <el-button @click="dialogDatas.dialogFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogDatas.confirmBtnClick"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-table
      class="marginTop10"
      :data="tableDatas.tableDatasAfterPage"
      stripe
      border
      empty-text="无数据"
    >
      <el-table-column
        v-for="column in tableDatas.tableColumns"
        :prop="column.prop"
        :label="column.label"
        :align="column.align"
        :width="column.width"
      >
        <template
          #default="scope"
          v-if="column.prop =='operate'"
        >
          <div>
            <!-- <el-button
              type="success"
              @click="tableDatas.editBtnClick(scope.row)"
            >修改</el-button> -->
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              title="确定删除该条记录?"
              @confirm="tableDatas.deleteBtnClick(scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>

        <template
          #default="scope"
          v-else-if="column.prop =='STATE'"
        >
          <div>
            <el-tag
              v-if="scope.row.STATE == 0"
              type="primary"
              size="large"
            >待审批</el-tag>
            <el-tag
              v-if="scope.row.STATE == 1"
              type="success"
              size="large"
            >审批已通过</el-tag>
            <el-tag
              v-if="scope.row.STATE == 2"
              type="danger"
              size="large"
            >审批未通过</el-tag>
          </div>
        </template>

      </el-table-column>
    </el-table>

    <!-- <el-pagination
      class="marginTop10"
      @size-change="tableDatas.filters.handleSizeChange"
      @current-change="tableDatas.filters.handleCurrentChange"
      :page-sizes="[10, 15, 20, 100]"
      :page-size="tableDatas.filters.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDatas.tableDatasAfterFilter.length"
    >
    </el-pagination> -->

  </div>
</template>
<script>
import { computed, reactive, ref } from 'vue';
import { onMounted, watch } from '@vue/runtime-core';
import myAxios from '@/myAxios/myAxios';
import { showWarning } from '@/hooks/useMyMessageBox';
import { v4 } from 'uuid';
import { dayjs } from 'element-plus';
import VueCookie from 'vue-cookie';
import { useRoute } from 'vue-router';
import store from '@/store';

export default {
  name: 'MyApplysView',
  setup () {
    let loading = ref(false);
    let addBtnClick = function () {
      let length = tableDatas.tableDatasAfterPage.filter(el => [-2, 0, 1, 2, 3, 4].includes(el.STATE)).length;
      if (length >= 2) {
        showWarning('个人车辆最多2辆,如需更换车牌请点击修改车牌按钮');
      }
      else {
        showFormDialog();
      }
    };

    let logoutBtnClick = function () {
      login();
    };

    let login = function () {
      let msg = route.query.type == '3' ? '请输入工号' : '请输入手机号';
      let pattern =
        route.query.type == '3' ?
          /^\d{4,5}$/ : /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      let errorMsg = route.query.type == '3' ? '工号不合法' : '手机号不合法';
      ElMessageBox.prompt(msg, 'Tip', {
        title: msg,
        message: msg,
        confirmButtonText: '确定',
        showCancelButton: false,
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        closeOnHashChange: false,
        inputPattern: pattern,
        inputErrorMessage: errorMsg,
      }).then(({ value }) => {
        VueCookie.set('outid', value);
        tableDatas.filters.currentID = value;

        myAxios.get('陈帅廷查询驱动访客系统审批人', '').then(res => {
          if (res instanceof Array) {
            store.state.spList.length = 0;
            store.state.spList.push(...res);
          }
          else {
            showWarning('获取审批人数据失败res!' + res);
          }
        }).catch((err) => {
          showWarning('获取审批人数据失败err!' + err);
        });

        getTableDatas();
      }).catch((err) => {
        showWarning(err, '账号错误');
        console.log('err :>> ', err);
      });
    };

    let showFormDialog = function (row) {
      if (row) {
        dialogDatas.isNew = false;
        dialogDatas.currentData = { ...row };
      }
      else {
        dialogDatas.isNew = true;
        // let userid = VueCookie.get('userid');
        let username = VueCookie.get('outname') ? VueCookie.get('outname') : '';
        // let DATA6 = VueCookie.get('userid');

        let PASSDATE = [];
        let checkSelect = '';
        let checkValue = {};
        dialogDatas.currentData = {
          USERID: tableDatas.filters.currentID,
          USERNAME: username,
          DATA3: '蓝',

          DATA6: tableDatas.filters.currentID,

          // checkSelect: checkSelect,
        };
        if (tableDatas.filters.isWB || tableDatas.filters.isJTNB) {
          // 外包一年
          if (tableDatas.filters.isWB) {
            dialogDatas.setPASSDATE({ srcElement: { innerText: '一年' } });
          }
          // 集团内部半年
          if (tableDatas.filters.isJTNB) {
            dialogDatas.setPASSDATE({ srcElement: { innerText: '半年' } });
          }
          // 从选项中获取审批人为8715,二级审批人为0120的
          let item = dialogDatas.formOptions['spListOption'].filter(el => {
            return el.SP_USERID == '8715' && el.DATA1 == '0120';
          });

          // checkValue = item[0];
          dialogDatas.currentData.SP_USERID = item[0].SP_USERID;
          dialogDatas.currentData.SP_USERNAME = item[0].SP_USERNAME;
          dialogDatas.currentData.DATA1 = item[0].DATA1;
          dialogDatas.currentData.checkSelect = item[0].value;
        }
        // dialogDatas.setPASSDATE({ srcElement: { innerText: '半年' } });
      };
      dialogDatas.dialogFormVisible = true;
    };

    let dialogDatas = reactive({
      dialogFormVisible: false,
      currentData: {},
      isNew: false,
      formOptions: {
        spList: computed(() => {
          return store.state.spList;
        }),
        spListOption: computed(() => {
          let options = [];
          let spList = JSON.parse(JSON.stringify(store.state.spList)).filter(el => ['11',].includes(el.TYPE)
            && (['0120'].includes(el.USERID) || !['0225'].includes(el.DATA1)));

          for (let i = 0; i < spList.length; i++) {
            let sp_option = {
              DEPART: spList[i].DEPART,
              DEPART1: spList[i].DEPART1,
              SP_USERID: '',
              SP_USERNAME: '',
              DATA1: '',
              DATA1_USERNAME: '',
              DATA2: '',
              label: '',
              value: spList[i].QD_VISITOR_SP_ID,
            };
            sp_option.SP_USERID = spList[i].USERID;
            sp_option.SP_USERNAME = spList[i].USERNAME;
            sp_option.DATA1 = spList[i].DATA1;

            sp_option.label = sp_option.DEPART + '-' + sp_option.DEPART1
              + '-' + sp_option.SP_USERID + '(' + sp_option.SP_USERNAME + ')';
            options.push(sp_option);
          }
          console.log('options :>> ', options);
          return options;
        })
      },
      formItems: [
        // {
        //   "value": "APPLY_ID",
        //   "label": "ID",
        //   "isDate": false,
        // },
        // {
        //   "value": "USERID",
        //   "label": "申请人ID",
        //   "isDate": false,
        // },
        {
          "value": "USERNAME",
          "label": "申请人姓名",
          "isDate": false,
        },
        {
          "value": "SP_USERID",
          "label": "审批人",
          "isDate": false,
          "isSelect": true,
          "selectOptionsName": "spListOption",
          "selectChanged": function (val) {
            if (val) {
              // let DEPART = val.split('---')[0];
              // let DEPART1 = val.split('---')[1];
              console.log('val :>> ', val);
              let f_option = dialogDatas.formOptions['spListOption'].find(el => el.value == val);
              if (f_option) {
                console.log('f_option :>> ', f_option);
                dialogDatas.currentData['SP_USERID'] = f_option.SP_USERID;
                dialogDatas.currentData['SP_USERNAME'] = f_option.SP_USERNAME;
                dialogDatas.currentData['DATA1'] = f_option.DATA1 ? f_option.DATA1 : '0120';
                // dialogDatas.currentData['DATA2'] = f_option.DATA2;
              }
            }
            else {
              dialogDatas.currentData['SP_USERID'] = '';
              dialogDatas.currentData['SP_USERNAME'] = '';
              dialogDatas.currentData['DATA1'] = '';
              dialogDatas.currentData['DATA2'] = '';
            }
          },
        },
        // {
        //   "value": "SP_USERID",
        //   "label": "审批人ID",
        //   "isDate": false,
        // },
        // {
        //   "value": "SP_USERNAME",
        //   "label": "审批人姓名",
        //   "isDate": false,
        // },
        // {
        //   "value": "TYPE",
        //   "label": "类型 0:内部审批 1 外部审批",
        //   "isDate": false,
        // },
        // {
        //   "value": "CREATETIME",
        //   "label": "创建时间",
        //   "isDate": false,
        // },
        // {
        //   "value": "PASSTIME",
        //   "label": "审批通过时间",
        //   "isDate": false,
        // },
        // {
        //   "value": "STATE",
        //   "label": "状态 0:待审批 1:审批通过 2:审批未通过",
        //   "isDate": false,
        // },
        {
          "value": "REASON",
          "label": "访问原因",
          "isDate": false,
        },
        {
          "value": "PASSDATE",
          "label": "访问时间",
          "isDate": false,
        },
        {
          "value": "PASSDATE_START",
          "label": "访问开始时间",
          "isDate": true,
          "dateOption": {
            "type": "datetime",
            // "shortcuts": [
            //   {
            //     text: '上午',
            //     value: () => {
            //       const end = new Date();
            //       const start = new Date();
            //       end.setHours(12);
            //       end.setMinutes(0);
            //       end.setSeconds(0);
            //       return [start, end];
            //     },
            //   },
            //   {
            //     text: '下午',
            //     value: () => {
            //       const start = new Date();
            //       start.setHours(12);
            //       start.setMinutes(0);
            //       start.setSeconds(0);
            //       const end = new Date();
            //       end.setHours(23);
            //       end.setMinutes(59);
            //       end.setSeconds(59);
            //       return [start, end];
            //     },
            //   },
            //   {
            //     text: '当天',
            //     value: () => {
            //       const start = new Date();
            //       const end = new Date();
            //       end.setHours(23);
            //       end.setMinutes(59);
            //       end.setSeconds(59);
            //       return [start, end];
            //     },
            //   },
            //   {
            //     text: '一星期',
            //     value: () => {
            //       const end = new Date();
            //       const start = new Date();
            //       end.setTime(start.getTime() + 3600 * 1000 * 24 * 6);
            //       return [start, end];
            //     },
            //   },
            //   {
            //     text: '一个月',
            //     value: () => {
            //       const end = new Date();
            //       const start = new Date();
            //       end.setTime(start.getTime() + 3600 * 1000 * 24 * 29);
            //       return [start, end];
            //     },
            //   },
            //   {
            //     text: '三个月',
            //     value: () => {
            //       const end = new Date();
            //       const start = new Date();
            //       end.setTime(start.getTime() + 3600 * 1000 * 24 * 89);
            //       return [start, end];
            //     },
            //   },
            // ],
            "format": "YYYY/MM/DD HH:mm:ss",
            "dateFormat": "YYYY/MM/DD",
            "timeFormat": "HH:mm:ss",
            "valueFormat": "YYYY/MM/DD HH:mm:ss"
          },
          "dateChanged": function (val) {
            if (val > dialogDatas.currentData['PASSDATE'][1]) {
              showWarning('结束时间不能早于开始时间');
              return;
            }
            dialogDatas.currentData['PASSDATE'][0] = val;
            console.log('val :>> ', val);
          },
        },
        {
          "value": "PASSDATE_END",
          "label": "访问结束时间",
          "isDate": true,
          "dateOption": {
            "type": "datetime",
            "format": "YYYY/MM/DD HH:mm:ss",
            "dateFormat": "YYYY/MM/DD",
            "timeFormat": "HH:mm:ss",
            "valueFormat": "YYYY/MM/DD HH:mm:ss"
          },
          "dateChanged": function (val) {
            if (val < dialogDatas.currentData['PASSDATE'][0]) {
              showWarning('结束时间不能早于开始时间');
              return;
            }
            dialogDatas.currentData['PASSDATE'][1] = val;
            console.log('val :>> ', val);
          },
        },
        {
          "value": "CARID",
          "label": "车牌号",
          "isDate": false,
          "isCar": true,
        },
        // {
        //   "value": "DATA1",
        //   "label": "DATA1",
        //   "isDate": false,
        // },
        // {
        //   "value": "DATA2",
        //   "label": "DATA2",
        //   "isDate": false,
        // },
        {
          "value": "DATA3",
          "label": "车牌颜色",
          "isDate": false,
          "isSwitch": true,
          "trueText": '蓝',
          "trueValue": '蓝',
          "trueColor": '#409EFF',
          "falseText": '绿',
          "falseValue": '绿',
          "falseColor": '#67C23A',
          "disabled": true,
        },
        {
          "value": "DATA4",
          "label": "车辆颜色",
          "isDate": false,

          "isOption": true,
          "options": [
            {
              value: '白色',
              label: '白色',
            },
            {
              value: '灰（银）色',
              label: '灰（银）色',
            },
            {
              value: '银（灰）色',
              label: '银（灰）色',
            },
            {
              value: '黑色',
              label: '黑色',
            },
            {
              value: '红色',
              label: '红色',
            },
            {
              value: '深蓝',
              label: '深蓝',
            },
            {
              value: '蓝色',
              label: '蓝色',
            },
            {
              value: '黄色',
              label: '黄色',
            },
            {
              value: '绿色',
              label: '绿色',
            },
            {
              value: '棕色',
              label: '棕色',
            },
            {
              value: '粉色',
              label: '粉色',
            },
            {
              value: '紫色',
              label: '紫色',
            },
            {
              value: '其它',
              label: '其它',
            },
          ],
        },
        {
          "value": "DATA5",
          "label": "车辆品牌",
          "isDate": false,
        },
        {
          "value": "DATA6",
          "label": "手机号码",
          "isDate": false,
        },

        // {
        //   "value": "DATA7",
        //   "label": "DATA7",
        //   "isDate": false,
        // },
        // {
        //   "value": "DATA8",
        //   "label": "DATA8",
        //   "isDate": false,
        // },
        // {
        //   "value": "DATA9",
        //   "label": "工号",
        //   "isDate": false,
        // },
        {
          "value": "DATA10",
          "label": "访客来源",
          "isDate": false,

          "isOption": true,
          "options": [
            {
              value: 'HTIC',
              label: '海天智联',
            },
            {
              value: 'HTU',
              label: '海天大学',
            },
            {
              value: 'OUTC',
              label: '海天外访客户',
            },
            {
              value: 'OUTS',
              label: '外包人员',
            },
            {
              value: 'HTZJ',
              label: '海天住精',
            },
            {
              value: 'OUTO',
              label: '其它',
            },
          ],
        },

      ],
      caridChanged: function (newCarid) {
        dialogDatas.currentData.CARID = newCarid;
        dialogDatas.currentData.DATA3 = newCarid.length == 7 ? '蓝' : '绿';
      },
      checkCurrentData: function () {
        let userid = tableDatas.filters.currentID;
        let sp_userid = dialogDatas.currentData.SP_USERID ? dialogDatas.currentData.SP_USERID : '';
        let carid = dialogDatas.currentData.CARID ? dialogDatas.currentData.CARID : '';
        // 访问原因
        let REASON = dialogDatas.currentData.REASON;
        // 访问时间
        let passdate = dialogDatas.currentData.PASSDATE;
        // 车辆品牌
        let DATA5 = dialogDatas.currentData.DATA5;
        // 手机号
        let DATA6 = dialogDatas.currentData.DATA6;
        // 集团内部工号
        // let DATA9 = dialogDatas.currentData.DATA9;
        // 访客来源
        let DATA10 = dialogDatas.currentData.DATA10;
        if (!userid) {
          showWarning('申请人工号不能为空');
          return false;
        }
        if (!sp_userid) {
          showWarning('审批人工号不能为空');
          return false;
        }
        if (!carid) {
          showWarning('车牌号不能为空,车牌输入完毕后请点击绿色完成按钮后提交');
          return false;
        }
        if (!REASON) {
          showWarning('访问原因不能为空');
          return false;
        }
        if (!passdate || passdate.length == 0) {
          showWarning('访问时间不能为空');
          return false;
        }
        else {
          let startDate = passdate[0];
          let endDate = passdate[1];
          let days = dayjs(endDate).diff(startDate, 'day');
          if (startDate > endDate) {
            showWarning('结束时间不能早于开始时间');
            return false;
          }
          if (!tableDatas.filters.isWB && !tableDatas.filters.isJTNB && days >= 90) {
            showWarning('访问时间不能超过90天');
            return false;
          }
        }
        if (!DATA5) {
          showWarning('车辆品牌不能为空');
          return false;
        }
        if (DATA6) {
          let inputPattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
          let result = inputPattern.test(DATA6);
          let inputErrorMessage = '手机号不合法';
          if (!result) {
            showWarning(inputErrorMessage);
            return false;
          }
        }
        else {
          showWarning('手机号不能为空');
          return false;
        }
        // if (tableDatas.filters.isJTNB && !DATA9) {
        //   showWarning('工号不能为空');
        //   return false;
        // }
        if (!DATA10) {
          showWarning('访客来源不能为空');
          return false;
        }

        return true;
      },
      confirmBtnClick: function () {
        let isPassCheck = dialogDatas.checkCurrentData();
        if (!isPassCheck) {
          return;
        }

        loading.value = true;

        let uuid = dialogDatas.currentData.APPLY_ID ? dialogDatas.currentData.APPLY_ID : v4();
        let userid = tableDatas.filters.currentID;
        let username = dialogDatas.currentData.USERNAME ? dialogDatas.currentData.USERNAME : '';
        let sp_userid = dialogDatas.currentData.SP_USERID;
        let sp_username = dialogDatas.currentData.SP_USERNAME;
        let type = 1;
        let createtime = dialogDatas.currentData.CREATETIME ? dialogDatas.currentData.CREATETIME : dayjs().format('YYYY/MM/DD HH:mm:ss');
        let passtime = dialogDatas.currentData.PASSTIME ? dialogDatas.currentData.PASSTIME : '';
        let state = 0;
        let reason = dialogDatas.currentData.REASON ? dialogDatas.currentData.REASON : '';
        let passdate = dialogDatas.currentData.PASSDATE ? dialogDatas.currentData.PASSDATE : '';
        let carid = dialogDatas.currentData.CARID;
        let data1 = dialogDatas.currentData.DATA1;
        let data2 = '';
        let data3 = dialogDatas.currentData.DATA3;
        let data4 = dialogDatas.currentData.DATA4;
        let data5 = dialogDatas.currentData.DATA5;
        let data6 = dialogDatas.currentData.DATA6;
        let data7 = '';
        let data8 = tableDatas.filters.isWB ? '外包' : (tableDatas.filters.isJTNB ? '集团内部' : '');
        let data9 = dialogDatas.currentData.DATA9 ? dialogDatas.currentData.DATA9 : '';
        let data10 = dialogDatas.currentData.DATA10;

        let params = `${uuid}\t${userid}\t${username}\t${sp_userid}` +
          `\t${sp_username}\t${type}\t${createtime}\t${passtime}` +
          `\t${state}\t${reason}\t${passdate}\t${carid}` +
          `\t${data1}\t${data2}\t${data3}\t${data4}` +
          `\t${data5}\t${data6}\t${data7}\t${data8}` +
          `\t${data9}\t${data10}`;

        myAxios.post('陈帅廷添加或修改驱动访客系统记录', params).then(res => {
          if (res.includes('成功')) {
            loading.value = false;
            dialogDatas.dialogFormVisible = false;
            ElMessage({
              showClose: true,
              type: 'success',
              message: '提交成功!' + res
            });
            myAxios.postToWeChat(sp_userid, '审批申请', '您有新的车辆审批申请,点击前往(工作台->驱动DS->通用专区->车辆登记->车辆审批)', window.location.origin + window.location.pathname + '#/insideApply/checkCars');

            getTableDatas();
          }
          else {
            loading.value = false;
            showWarning('更新失败res!' + res);
          }
        }).catch((err) => {
          loading.value = false;
          showWarning('更新失败err!' + err);
        });

      },
      setPASSDATE: function (title) {
        let text = title.srcElement.innerText;
        switch (text) {
          case '上午':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD 00:00:00'), dayjs().format('YYYY/MM/DD 12:00:00')];
            break;
          case '下午':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD 12:00:00'), dayjs().format('YYYY/MM/DD 23:59:59')];
            break;
          case '今天':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD HH:mm:ss'), dayjs().format('YYYY/MM/DD 23:59:59')];
            break;
          case '明天':
            dialogDatas.currentData.PASSDATE = [dayjs().add(1, 'day').format('YYYY/MM/DD 00:00:00'), dayjs().add(1, 'day').format('YYYY/MM/DD 23:59:59')];
            break;
          case '三天':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD 00:00:00'), dayjs().add(2, 'day').format('YYYY/MM/DD 23:59:59')];
            break;
          case '一周':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD 00:00:00'), dayjs().add(6, 'day').format('YYYY/MM/DD 23:59:59')];
            break;
          case '一个月':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD 00:00:00'), dayjs().add(29, 'day').format('YYYY/MM/DD 23:59:59')];
            break;
          case '三个月':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD 00:00:00'), dayjs().add(89, 'day').format('YYYY/MM/DD 23:59:59')];
            break;
          case '半年':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD 00:00:00'), dayjs().add(6, 'month').format('YYYY/MM/DD 23:59:59')];
            break;
          case '一年':
            dialogDatas.currentData.PASSDATE = [dayjs().format('YYYY/MM/DD 00:00:00'), dayjs().add(12, 'month').format('YYYY/MM/DD 23:59:59')];
            break;
        }
        dialogDatas.currentData.PASSDATE_START = dialogDatas.currentData.PASSDATE[0];
        dialogDatas.currentData.PASSDATE_END = dialogDatas.currentData.PASSDATE[1];
      },
      cancelBtnClick: function () {

      }
    });

    let getTableDatas = function () {
      loading.value = true;

      let id = tableDatas.filters.currentID;
      let params = `${id}\t1`;
      myAxios.get('陈帅廷查询驱动访客系统内部车辆', params).then(res => {
        if (res instanceof Array) {
          loading.value = false;
          tableDatas.oritableData = [...res];
          // ElMessage({
          //   showClose: true,
          //   type: 'success',
          //   message: '最新数据获取成功!'
          // });
        }
        else {
          loading.value = false;
          showWarning('获取数据失败res!' + res);
        }
      }).catch((err) => {
        loading.value = false;
        showWarning('获取数据失败err!' + err);
      });
    };

    let route = useRoute();
    onMounted(() => {
      let id = VueCookie.get('outid');

      if (!id) {
        login();
      }
      else {
        VueCookie.set('outid', id);
        tableDatas.filters.currentID = id;

        myAxios.get('陈帅廷查询驱动访客系统审批人', '').then(res => {
          if (res instanceof Array) {
            store.state.spList.length = 0;
            store.state.spList.push(...res);
          }
          else {
            showWarning('获取审批人数据失败res!' + res);
          }
        }).catch((err) => {
          showWarning('获取审批人数据失败err!' + err);
        });

        getTableDatas();
      }
      if (route.query.type == '2') {
        tableDatas.filters.isWB = true;
      }
      console.log('route.query.type :>> ', route.query.type);
      if (route.query.type == '3') {
        console.log('tableDatas.filters.isJTNB :>> ', tableDatas.filters.isJTNB);
        dialogDatas.formItems.splice(0, 0,
          {
            "value": "USERID",
            "label": "申请人ID",
            "isDate": false,
          },
        );
        tableDatas.filters.isJTNB = true;

        myAxios.get('陈帅廷查询员工直接领导', tableDatas.filters.currentID).then(res => {
          if (res instanceof Array) {
            VueCookie.set('outname', res[0].NAME);
          }
          else {
            showWarning('获取姓名失败res!' + res);
            console.log('获取姓名失败res!' + res);
          }
        }).catch((err) => {
          showWarning('获取姓名失败err!' + err);
          console.log('获取姓名失败err!' + err);
        });
      }
    });

    let tableDatas = reactive({
      //表格筛选展示相关代码
      filters: {
        currentID: '',
        //是否外包,外包工 审批人固定 和 申请时间固定一年
        isWB: false,
        //是否集团内部,审批人固定 和 申请时间固定半年
        isJTNB: false,

        //表格翻页相关代码
        currentPage: 1,
        pagesize: 10,
        handleSizeChange (val) {
          tableDatas.filters.pagesize = val;
        },
        handleCurrentChange (val) {
          tableDatas.filters.currentPage = val;
        },
      },
      tableDatasAfterFilter: computed(() => {
        let fData = tableDatas.oritableData;
        return fData;
      }),
      tableDatasAfterPage: computed(() => {
        let fData = tableDatas.tableDatasAfterFilter;
        fData = fData.slice((tableDatas.filters.currentPage - 1) * tableDatas.filters.pagesize, tableDatas.filters.currentPage * tableDatas.filters.pagesize);
        return fData;
      }),

      tableColumns: [
        // {
        //   "prop": "APPLY_ID",
        //   "label": "ID",
        //   "align": "center",
        // },
        {
          "prop": "USERID",
          "label": "申请人ID",
          "align": "center"
        },
        {
          "prop": "USERNAME",
          "label": "申请人姓名",
          "align": "center"
        },
        {
          "prop": "SP_USERID",
          "label": "审批人ID",
          "align": "center"
        },
        {
          "prop": "SP_USERNAME",
          "label": "审批人姓名",
          "align": "center"
        },
        // {
        //   "prop": "TYPE",
        //   "label": "类型 0:内部审批 1 外部审批",
        //   "align": "center",
        // },
        {
          "prop": "CREATETIME",
          "label": "创建时间",
          "align": "center"
        },
        {
          "prop": "PASSTIME",
          "label": "审批通过时间",
          "align": "center"
        },
        {
          "prop": "STATE",
          "label": "状态",
          "align": "center",
        },
        // {
        //   "prop": "REASON",
        //   "label": "访问原因",
        //   "align": "center",
        // },
        // {
        //   "prop": "PASSDATE",
        //   "label": "外部访客访问时间",
        //   "align": "center",
        // },
        {
          "prop": "CARID",
          "label": "车牌号",
          "align": "center"
        },
        // {
        //   "prop": "DATA1",
        //   "label": "DATA1",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA2",
        //   "label": "DATA2",
        //   "align": "center",
        // },
        {
          "prop": "DATA3",
          "label": "车牌颜色",
          "align": "center",
        },
        {
          "prop": "DATA4",
          "label": "车辆颜色",
          "align": "center",
        },
        {
          "prop": "DATA5",
          "label": "车辆品牌",
          "align": "center",
        },
        {
          "prop": "DATA6",
          "label": "手机号码",
          "align": "center",
        },

        // {
        //   "prop": "DATA7",
        //   "label": "DATA7",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA8",
        //   "label": "DATA8",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA9",
        //   "label": "DATA9",
        //   "align": "center",
        // },
        // {
        //   "prop": "DATA10",
        //   "label": "DATA10",
        //   "align": "center",
        // },

        {
          "prop": "operate",
          "label": "操作",
          "align": "center",
          "width": 170,
        }
      ],
      oritableData: [],
      editBtnClick: function (row) {
        showFormDialog(row);
      },
      deleteBtnClick: function (row) {
        loading.value = true;

        let deleteState = row.STATE;
        // 如果是完成状态,状态设为-2,推送给汪工
        if (deleteState == 4) {
          deleteState = -2;
        }
        // 否则状态直接设为-3
        else {
          deleteState = -3;
        }
        let params = `${row.APPLY_ID}\t${deleteState}\t${row.PASSTIME}\t`;
        myAxios.post('陈帅廷更新驱动访客系统状态和通过时间', params).then(res => {
          if (res.includes('成功')) {
            loading.value = false;
            // dialogDatas.dialogFormVisible = false;
            ElMessage({
              showClose: true,
              type: 'success',
              message: '删除成功!' + res
            });
            tableDatas.oritableData.splice(tableDatas.oritableData.indexOf(row), 1);
          }
          else {
            loading.value = false;
            showWarning('删除失败res!' + res);
          }
        }).catch((err) => {
          loading.value = false;
          showWarning('删除失败err!' + err);
        });

      },
    });

    return {
      loading,
      addBtnClick,
      logoutBtnClick,
      getTableDatas,
      dialogDatas,
      tableDatas,
    };
  }
}
</script>
<style lang="css" scope>
.marginTop10 {
  margin-top: 10px;
}
</style>

